<template>
  <div :style="{width:'100%',height:'100%'}">
    <div :style="{width:'100%',height:'10%'}">
          <v-select v-model="untotals" id="selectid" :value.sync="model.f_name"
            :options='selects' placeholder='请选择' close-on-select clear-button>
          </v-select>
          <!--<v-select v-model="untotals" placeholder="钻取字段">-->
            <!--<v-option value="f_usertype">用户类型</v-option>-->
            <!--<v-option value="F_PHONE">用户手机</v-option>-->
          <!--</v-select>-->
      <button class="btn btn-success" @click="confirm">钻取</button>
    </div>
    <div id="bar" :style="{width:'100%',height:'90%'}">
    </div>
  </div>
</template>

<script>
  import * as Util from '../Util'
  import co from 'co'
  import echarts from 'echarts'
  import { HttpResetClass } from 'vue-client'

  let load = new HttpResetClass()
  let getData = function * (self) {
    load.load('POST', 'rs/sql/drill',
      {data: {groupby: self.groupby, orderby: 'value', conditions: self.condition}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        // //首先获得下拉框的节点对象；
        // let select = document.getElementById('selectid')
        // //2.获得该下拉框所有的option的节点对象
        // let options = select.options
        // //3.获得当前选中的option的索引
        // let index = select.selectedIndex
        // //获得当前选中的option的文本内容
        // self.texttile = options[index].text
        let arrparams = []
        for (var i = 0; i < res.data.length; i++) {
          arrparams[i] = res.data[i].name
        }
        console.log(arrparams,res)
        self.set(arrparams,res.data)
      })
  }
    export default {
      name: "bar",
      props: {
        total: String,
        condition: String
      },
      data () {
        return {
          texttile: '',
          xc: '',
          untotals: 'f_usertype', //如果直接绑定totals那么不点击钻取按钮total就可以改变，那么在点击钻取按钮后改变select的选项，再点击饼状图，会将改变后的total传给父组件，而不是钻取时的select选项。
          groupby: '',
          orderby: '',
          drillcondition: '', //钻取的字段对应的值
          selects:[
              {label: '用户类型', value: 'f_usertype'},
              {label: '安检人', value: 'f_checker'}
          ],
          model: {
            f_name: ''
          }
        }
      },
      methods: {
        set (arrparams,pricedata) {
          this.xc = echarts.init(document.getElementById('bar'))
          this.xc.setOption({
            title: {
              text: this.texttile + '饼状图',
              subtext: '数据汇总',
              x: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              x: 'left',
              y: 'bottom',
              data: arrparams
            },
            series: [
              {
                name: '数据来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: '20',
                      fontWeight: 'bold'
                    }
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data:pricedata
              }
            ]
          })
          this.xc.on("click", this.eConsole)
        },
        eConsole (param) {
          this.drillcondition =' and ' + this.total + '=\'' + param.name + '\''//用\转义单引号
          // this.conditions = this.conditions + this.condition
          // this.$emit('conditions', this.conditions)
          this.$emit('drillcondition-changed', this.drillcondition)
          console.log(param, 'totals:' + this.total)
        },
        confirm () {
          this.total = this.untotals
          this.groupby = this.total
          this.orderby = this.total
          console.log('total:' + this.total, 'condition:' + this.condition)
          // this.$emit('total', this.total)
          this.searchdata()
        },
        //明细列表会调用此方法，饼状图将以明细列表的查询条件再次查询并将结果更新至饼状图
        search (param) {
          console.log(param)
          // this.condition = param
          // this.searchdata()
        },
        searchdata () {
          let getGen = getData(this)
          co(getGen)
        }
      },
      ready () {
        // this.searchdata()
      },
      watch: {
        // 'condition' (val) {
        //   this.conditions = this.condition
        //   console.log('父组件传到bar组件的conditions:' + this.condition)
        // },
        // 'total' (val) {
        //   console.log('父组件传到bar组件的total:' + this.total)
        // }
      }
    }
</script>

